<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <#include "/common/_commresource.html"/>
    <title>随意论坛</title>
</head>

  <body>
    <#include "/common/_commtop.html"/> 
<!-- start site's main content area -->
<section class="content-wrap">
<div class="container">
<div class="row">
<main class="col-md-8 main-content">

<!-- 主内容 start -->
<article id="${section['sectionId']}" class="post">
    <div class="post-head">
        <h1 class="post-title"><a href="#">${section['sectionName']}</a></h1>
        <div class="post-meta">
            <span class="author">作者：<a href="#">${section['nickName']!'木有名字！'}</a></span> •
            <time class="post-date" datetime="${section['createTime']}" title="${section['createTime']}">${section['createTime']}</time>
        </div>
    </div>
    <div class="featured-media">
        <a href="#"><img src="#" alt="#"></a>
    </div>
    <div class="post-content" style="word-wrap:break-word">
        <p>${section['sectionContext']}</p>
    </div>
</article>
<!-- 主内容 end -->

<!-- 已回复内容 start -->
<#list sectionDetailList as x>
<article id="${x['sectionDetailId']}" class="post">
    <div class="col-md-12">
		<div class="col-sm-3">
		<#if x['headPortraitImg']??>
		<img src="${x['headPortraitImg']}" class="media-object imgheadcss" style="width:100%;height:50%;margin-top:0 0 0 0;"/>
		<#else>
		<img src="${request.contextPath}/resources/web/image/userdefualt.png" class="media-object imgheadcss" style="width:100%;height:50%;margin-top:0 0 0 0;"/>
		</#if>
        <p>${section['nickName']!}</p>
		</div>
		<div class="col-sm-9">
			<div class="col-sm-12" style="height:5%;">
				<time class="post-date" datetime="${x['sectionDetailCreateTime']!}" title="${x['sectionDetailCreateTime']!}">${x['sectionDetailCreateTime']!}</time>
        	</div>
        	<div class="col-sm-12">
        	${x['sectionDetailContext']!}
        	</div>
		</div>
	</div>
</article>
</#list>
<!-- 已回复内容 end -->

<!-- 分页 start -->
<!-- 不同页面传参不一致需要分开放 -->
<#include "/common/_paginate.html"/>
<@paginate currentPage=pageNum totalPage=totalPages actionUrl="${request.contextPath}/section/sectionDetail?sectionId=${section['sectionId']}&pageSize=5&pageNum=" />
<!-- 分页 end -->
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/summernote/summernote.css"></link>
<script src="${request.contextPath}/static/summernote/summernote.js"></script>
<form class="form-horizontal templatemo-signin-form" role="form" id="sectiondetailform">
<!-- 回复内容 start -->
<div class="col-sm-12" style="margin-bottom: 5%;">
<div id="summernote"></div>
<!-- 验证码 start-->
<div class="form-group">
				<!--div class="col-md-3" style="text-align: center;">
				<img src="${request.contextPath}/validateCode/getCode" onclick="getcaptcha(this);"/>
				</div>
				<div class="col-sm-5">
				<input type="text" id="captcha" name="captcha" placeholder="验证码" />
				</div-->
				<div class="col-sm-4"><button type="button" 
				class="btn btn-primary" style="width:60%; 
				margin-right:5%;" onclick="sectinDetailSave();">回帖</button>
				</div>
		</div>
<!-- 验证码 end -->
<script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
    $('#summernote').summernote({  
    	lang: 'zh-CN',
    	minHeight: 300,             // set minimum height of editor
  	    maxHeight: null,             // set maximum height of editor 
        callbacks: {  
            onImageUpload: function(files) { //the onImageUpload API  
                console.debug(files);
                img = sendFile(files[0]);  
        }  
    }  
    });  
    function sendFile(file) {  
        data = new FormData();  
        data.append("file", file);  
        console.log(data);  
        $.ajax({  
            data: data,  
            type: "POST",  
            url: "${request.contextPath}/upload-file/image",  
            cache: false,  
            contentType: false,  
            processData: false,  
            success: function(data) {  
                if(data.status==200){
                	$("#summernote").summernote('insertImage',data.path, 'image name');
                }else{
					alert(data.error);
                }
            }  
        });  
    }  
	function getCode(){
		var markupStr = $('#summernote').summernote('code');
		return markupStr;
	}
	/*function setCode(markupStr){
		$('#summernote').summernote('code', markupStr);
	}
	function getcaptcha(obj){
		obj.src="${request.contextPath}/validateCode/getCode?nowDate="+new Date();
	}*/
	function sectinDetailSave(){
		$.ajax({
		    type: "post",
		    dataType: 'json',
		    url: '${request.contextPath}/sectionDetal/save',
		    data: {context:getCode(),sectionId:${section['sectionId']?c}},
		    success:function(data){
		    	if(data.status==200){
		    		layer.msg(data.msg, {icon: 1,time:2000});
		    		location.replace(location.href);
			    }else{
			    	/*layer.open({
		     		 	title: '提示',content: data.msg
		    		});  */
			    	//layer.msg(data.msg, {icon: 5,time:2000});
			    	layer.tips(data.msg, '#password_login',{tips: 3});
				}
		    }
		});
	}
  </script>
<!-- 回复内容end -->
</div>	
</form>
</main>
<#include "/common/_commright.html"/>
            </div>
        </div>
    </section>

<!-- 页脚 start -->
<#include "/common/_friendshiplink.html"/>
<!-- 页脚 end -->
</body>
</html>